<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<view class="body">
				<view class="m-header m-b2">
					<view class="top-btn-area">
						<navigator url="/package_member/setting/setting" hover-class="none" class="setting-btn f-s46">
							<image src="@/static/images/setting.png" mode="widthFix"></image>
						</navigator>
					</view>
					<view class="user-area">
						<view class="user-avator"><image src="@/static/images/user_avator.jpg" mode="widthFix"></image></view>
						<view class="info">
							<view class="user-name-bar">
								<text>{{ userInfo.realname }}</text>
							</view>
							<view class="sub-info">
								<view class="user-lever">{{ phone }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mod-wrap m-b2">
					<view class="menu-list">
						<!-- <navigator url="/" hover-class="none" class="item">
						<view class="icon"><image src="@/static/images/dev_icon.png" mode="widthFix"></image></view>
						<view class="content">
							<view class="name">修改资料</view>
							<view class="iconfont f-s24">&#xe653;</view>
						</view>						
					</navigator> -->
						<navigator url="/package_member/dev_list/dev_list" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/dev_icon.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">已安装设备</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view>
						</navigator>
						<navigator v-if="userInfo.user_type_id == 5" url="/package_common/condition/condition" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/sh_icon.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">设备状况</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view>
						</navigator>
						<navigator url="/package_member/attractant_manage/attractant_manage" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/yyj_icon.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">引诱剂更换</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view>
						</navigator>
						<navigator url="/package_shibie/index/index" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/pzsb.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">拍照识别</view>
								<view class="iconfont f-s24">&#xe653;</view>  
							</view>
						</navigator>
						<navigator url="/package_pests/pest_list/pest_list?dev_type=3" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/cq_warn.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">虫情预警设置</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view>
						</navigator>
						<!-- <navigator v-if="true" url="/package_zhinengcipan/detail/detail?number=7d384bba27af11eeaacc3576f10f6946" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/yyj_icon.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">瓷盘采集</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view> 
						</navigator> -->
					</view>
				</view>

				<!-- #ifndef APP-PLUS -->
				<!-- <view class="mod-wrap">
					<view class="menu-list">
						<view class="item">
							<view class="icon"><image src="@/static/images/code.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">扫一扫</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view class="mod-wrap">
					<view class="menu-list">
						<!-- isVersionUpdate -->
						<template v-if="isVersionUpdate">
							<view class="item" @click="updateVersion">
								<view class="icon"><image src="@/static/images/banben_icon.png" mode="widthFix"></image></view>
								<view class="content">
									<view class="name">版本更新</view>
									<view class="link">
										v{{ version }}
										<view class="circle"></view>
									</view>
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</template>
						<template v-else>
							<navigator url="/package_member/updateLog/updateLog" hover-class="none" class="item">
								<view class="icon"><image src="@/static/images/banben_icon.png" mode="widthFix"></image></view>
								<view class="content">
									<view class="name">版本更新</view>
									<view class="link">v{{ version }}</view>
									<view class="iconfont f-s24">&#xe653;</view>
								</view>
							</navigator>
						</template>

						<navigator url="/package_member/about/about" hover-class="none" class="item">
							<view class="icon"><image src="@/static/images/about_icon.png" mode="widthFix"></image></view>
							<view class="content">
								<view class="name">智慧农业</view>
								<view class="iconfont f-s24">&#xe653;</view>
							</view>
						</navigator>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</template>
	</view>
</template>

<script>
import { replaceStr, encodeToString } from '@/common/util.js';
import { viewHotFixInit } from '@/common/updateModel.js';
import { getSystemInfo } from '@/common/promise.js';
export default {
	name: 'demo',
	data() {
		return {
			isLogin: false,
			token: uni.getStorageSync('token'),
			userInfo: uni.getStorageSync('userInfo'),
			isIphoneX: getApp().globalData.isIphoneX,
			version: uni.getStorageSync('now_version'),
			loginStateUpdate: false,
			phone: '',
			isVersionUpdate: false,
			version_update_data: {
				log: '',
				version: '',
				url: ''
			}
		};
	},
	async onShow() {
		this.isLogin = await this.$loginState('check');
		if (this.isLogin) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.token = uni.getStorageSync('token');
			this.phone = replaceStr(this.userInfo.phone, 3, '****');
			this.checkVersion();
		} else {
			this.isLogin = this.$loginState('reset');
		}
	},
	async onLoad() {},
	methods: {
		scanCode: function() {
			let _this = this;
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: function(res) {
					if (res.result.indexOf('devnumber') == -1) {
						// 不存在 devnumber 二维码不合法
						_this.$showToast({
							icon: 'loading',
							title: '二维码不合法',
							duration: 2000
						});
					} else {
						let number = res.result.split('?')[1].split('=')[1];
						uni.showLoading({
							mask: true,
							title: '跳转中...'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: `/package_common/detail/detail?number=${number}`,
								success() {
									uni.hideLoading();
								}
							});
						}, 1000);
					}
				},
				fail() {
					_this.$showToast({
						icon: 'loading',
						title: '扫码失败...',
						duration: 2000
					});
				}
			});
		},

		logout: function() {
			uni.showModal({
				content: '确定要退出登录吗？',
				success(res) {
					if (res.confirm) {
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						uni.removeStorageSync('cookiekey');
						uni.showLoading({
							title: '退出登录',
							mask: true,
							success() {
								// uni.clearStorage();
								setTimeout(() => {
									uni.hideLoading();
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}, 500);
							}
						});
					} else {
					}
				}
			});
		},

		//检测是否有新版本
		checkVersion: async function() {
			// #ifdef APP-PLUS
			let res = await this.$api.user_api.getVersion();
			console.log('获取最新版', res);
			if (res.data.rcode == 1) {
				this.version_update_data = res.data.rdata;
				let reg2 = /[.]/gi; // 匹配全部 '.' =>''
				console.log(uni.getStorageSync('now_version'), res.data.data.appWgtVersion);
				let new_version = res.data.rdata.version.replace(reg2, ''); //  1.0 =>10  版本格式转数字类型
				let old_version = uni.getStorageSync('now_version').replace(reg2, ''); //  1.0 =>10  版本格式转数字类型
				let new_version_arr = res.data.rdata.version.split('.'); // 1.0.0 => [1,0,0]  版本转换成数组
				let old_version_arr = uni.getStorageSync('now_version').split('.'); // 1.0.0 => [1,0,0]  版本转换成数组
				if (Number(new_version) > Number(old_version) || new_version_arr[0] > old_version_arr[0] || new_version_arr[1] > old_version_arr[1]) {
					this.isVersionUpdate = true;
				}
			}
			// #endif
		},

		// 更新版本
		updateVersion: async function() {
			console.log(1111, this.isVersionUpdate);
			let _this = this;
			// 大版本版本更新   弹窗更新提示
			let system = await getSystemInfo(); //  获取系统信息

			// "data": {
			// 	"rcode": 1,
			// 	"rmsg": "获取成功",
			// 	"rdata": {
			// 		"id": "2",
			// 		"version": "1.0.1",
			// 		"file_path": "http://ruifengbio.agri120.org/uploads/zhnyapp/zhnyapp_202208080940005119.apk",
			// 		"versionCode": "101",
			// 		"newfile": "http://ruifengbio.agri120.org/uploads/zhnyapp/zhnyapp_update_202208080940008355.wgt",
			// 		"remark": "1、生态监控页面样式调整"
			// 	}
			// },
			if (this.isVersionUpdate) {
				viewHotFixInit({
					systemInfo: system,
					log_data: this.version_update_data.remark.split(';'),
					version: this.version_update_data.version,
					versionCode: this.version_update_data.versionCode,
					apk_path: this.version_update_data.file_path
				});
			}
		}
	},

	components: {}
};
</script>

<style lang="less">
.body {
	.m-header {
		font-size: 28rpx;
	}
}
.loading {
	text-align: center;
	padding: 40rpx 0;
	image {
		width: 36rpx;
	}
}
.m-header {
	position: relative;
	height: 200rpx;
	background: #fff;
	.user-area {
		display: flex;
		padding: 40rpx 4%;
	}
}
.top-btn-area {
	display: flex;
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	.code {
		height: 56rpx;
		line-height: 56rpx;
		margin-right: 20rpx;
	}
	.setting-btn {
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: #fff;
		image {
			width: 70%;
		}
	}
}

.user-area {
	.user-avator {
		width: 120rpx;
		height: 120rpx;
		padding: 5rpx;
		margin-right: 20rpx;
		background: #fff;
		box-shadow: 2rpx 2rpx 5rpx #ccc;
		border-radius: 50%;
		image {
			width: 100%;
			border-radius: 50%;
		}
	}
	.info {
		width: 70%;
		.user-name-bar {
			margin-bottom: 15rpx;
			color: #333;
			font-weight: bold;
			text {
				font-size: 30rpx;
			}
		}
		.sub-info {
			display: flex;
			align-items: center;
		}
		.tellphone {
			margin: 0 10rpx 5rpx 0;
			color: #fff;
			font-size: 22rpx;
		}
		.user-lever {
			padding: 0 8rpx;
			border: 2rpx solid #0085ff;
			background: #e1f1ff;
			border-radius: 38rpx;
			font-size: 22rpx;
			color: #0085ff;
		}
	}
}

.mod-wrap {
	margin: 0 auto 20rpx;
	background: #fff;
	.menu-list {
	}
}
.menu-list {
	@h: 100rpx;
	.item {
		display: flex;
		align-items: center;
		height: @h;
		padding-left: 20rpx;
		.icon {
			display: flex;
			align-items: center;
			width: 50rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
			image {
				width: 90%;
			}
		}
		.content {
			display: flex;
			justify-content: space-between;
			height: @h;
			line-height: @h;
			padding-right: 10rpx;
			flex-grow: 2;
			border-bottom: 2rpx solid #eee;
			.iconfont {
				color: #999;
			}
			.name {
				font-size: 32rpx;
				color: #333;
			}
			.link {
				position: relative;
				font-size: 32rpx;
				color: #333;
				flex: 1;
				text-align: right;
				padding-right: 20rpx;
				.circle {
					position: absolute;
					right: -20rpx;
					top: 20rpx;
					width: 20rpx;
					height: 20rpx;
					background: #f00;
					border-radius: 50%;
				}
			}
		}
	}
}

.btn {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	margin-bottom: 20rpx;
	background: #fff;
	color: #0085ff;
	font-size: 32rpx;
}
</style>
